<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>部门</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <script src="/febs/page-transitions/js/jquery.min.js"></script>
    <script th:src="@{/page/js/vue.min.js}" type="text/javascript" charset="utf-8"></script>
    <script th:src="@{/layer/layer/layer.js}"></script>
    <link rel="stylesheet" href="../page/page.css" media="all">
    <link rel="stylesheet" href="../page/index.css" media="all">
</head>
<style>
    body{
        font-size: 30px;
    }
    .active{
        background-color: #6699ff;
    }
</style>
<body>


<div class="deptDiv" id="app" @click="pageClick">

    <div style="clear:both;margin-top: 200px" ></div>
    <div class="titleDiv">
        一网通办
    </div>
    <div class="titleTextDiv">
        <span>项目名称</span>
        <img src="/page/img/03-jt.png" height="10px">
        <span style="color: #4afffc;">事项名称</span>

    </div>
    <div style="clear:both"></div>
    <div class="deptContentDiv">
        <div class="deptContentIconDiv">

        </div>
        <div class="deptContentTitleDiv">
            项目名称
        </div>
        <div style="clear:both;color: #fff;margin-left: 20px" id="notice"></div>

        <div class="deptContentMenuDiv">
            <div class="deptContentMenuOneDiv" th:each="menu,menuStat:${menuTitleList}">
                <div class="deptContentMenuOneTextDiv" th:id="${menu.id}" th:text="${menu.name}" th:onclick="deptClick('[(${menu.id})]','[(${menuStat.index})]')"></div>
            </div>


        </div>
        <div class="deptContentViewDiv">




            <!--<div style="clear:both"></div>-->
        </div>
    </div>
    <div>
        <!-- 主页按钮图片 -->
        <img class="img-people-yuyue" @click.stop="tapHome"
             :style="isMove && isYueShow ? yueStyle:''" :class="{'img-yuyue-show': isYueShow}"
             th:src="@{img/08-zy.png}">
        <!--返回按钮图片-->
        <img class="img-yuyue" @click.stop="tapBack"
             :style="isMove && isYueShow ? yueStyle:''" :class="{'img-yuyue-show': isYueShow}"
             th:src="@{img/09-fh.png}">
    </div>

</div>
<script th:inline="javascript">
    var menuTitleList = [[${menuTitleList}]];
    console.log(menuTitleList)

    // 鼠标位置和div的左上角位置 差值
    var dx, dy
    var screenWidth = window.screen.width;
    var screenHeight = window.screen.height;
    var vm = new Vue({
        el: '#app',
        data: {
            commonNoticeShow:true,
            notice:{},
            radio:'1',
            isYueShow: false, // 按钮图片是否完全显示
            isPeopleYuYueShow:true,
            flags: false,
            isMove: false,
            position: {
                x: 0,
                y: 0
            }
        },
        mounted:function() {},
        computed: {
            yueStyle:function(){
                if(this.position.y == 0 && this.position.x == 0) {
                    return ''
                }
                var styles = {
                    top: this.position.y+'px',
                    left: this.position.x+'px'
                }
                return styles
            }
        },
        created:function(){},
        methods: {
            // 页面级的点击事件
            pageClick:function(){
                this.isYueShow = false;
            },
            deptClick:function(index){
                if(index%2==0){

                }
            },
            // 主页按钮事件
            tapHome:function() {
                if (this.isYueShow) {
                    //跳转到主页
                    window.location='/page/index'
                }
                this.position.x = 0;
                this.position.y = 0;
                this.isYueShow = !this.isYueShow;
            },
            // 返回按钮事件
            tapBack:function() {
                if (this.isYueShow) {
                    //跳转到上一页
                    window.history.go(-1);
                }
                this.position.x = 0;
                this.position.y = 0;
                this.isYueShow = !this.isYueShow;
            },
            // 实现移动端拖拽
            down:function(event) {
                this.flags = true;
                var touch;
                if (event.touches) {
                    touch = event.touches[0];
                } else {
                    touch = event;
                }
                dx = touch.clientX - event.target.offsetLeft
                dy = touch.clientY - event.target.offsetTop
            },
            move:function() {
                this.isMove = true;
                if (this.flags) {
                    var touch;
                    if (event.touches) {
                        touch = event.touches[0];
                    } else {
                        touch = event;
                    }
                    this.isYueShow = true;
                    // 定位滑块的位置
                    this.position.x = touch.clientX - dx;
                    this.position.y = touch.clientY - dy;
                    // 限制滑块超出页面
                    // console.log('屏幕大小', screenWidth, screenHeight )
                    if (this.position.x < 0) {
                        this.position.x = 0
                    } else if (this.position.x > screenWidth - touch.target.clientWidth) {
                        this.position.x = screenWidth - touch.target.clientWidth
                    }
                    if (this.position.y < 0) {
                        this.position.y = 0
                    } else if (this.position.y > screenHeight - touch.target.clientHeight) {
                        this.position.y = screenHeight - touch.target.clientHeight
                    }
                    //阻止页面的滑动默认事件
                    document.addEventListener("touchmove", function() {
                        event.preventDefault();
                    }, false);
                }
            },
            //鼠标释放时候的函数
            end:function() {
                this.flags = false;
            },
            //查看更多
            viewMore:function(){
                mui.openWindow({
                    url: "/page/v2/goPage?pageName=more&areaCode="+vm.areaCode+"&siteUnid="+vm.siteUnid+"&siteCode="+vm.siteCode,
                })
            },
            ready:function(callback) {
                if (window.AlipayJSBridge) {
                    callback && callback();
                } else {
                    document.addEventListener('AlipayJSBridgeReady', callback, false);
                }
            },

        }
    })

</script>
<script>




        $(function () {
            $('.titleDiv').html(sessionStorage.getItem("key"))
            $('.deptContentTitleDiv').html(sessionStorage.getItem("key")+"项目名称")
            if(sessionStorage.getItem("key")=='一网通办'){
                $('#notice').html('注：在河南政务服务网（郑州市—郑东新区）“一网通办”全区1006项事项')
            }

            //页面默认选中第一个部门
            deptClick(menuTitleList[0].id,0)
        });

        /*部门点击事件*/
        function deptClick(p1,p2) {
            $('#'+p1).parent().addClass("active").siblings().removeClass("active");
            $('.deptContentViewDiv').html('')
            $.ajax({
                type: "GET",
                url: "/web/getMenuContentList?menuId="+p1,
                data: {},
                //async: false, // 同步
                dataType: "json",
                success: function (res) {

                    if(res.code==200){
                        if(p2%2==0){
                            if(res.alist.length>0){
                                res.alist.forEach(function (e, i) {
                                    var html = '<a href="/page/item?type=public&id='+e.id+'"><div class="deptContentViewOneDiv" id="'+e.id+'" >\n' +
                                        '                <div class="deptContentViewOneIconDiv-1">◆</div>\n' +
                                        '                <div class="deptContentViewOneTextDiv-1">'+e.name+'</div>\n' +
                                        '            </div></a>'
                                    $('.deptContentViewDiv').append(html)
                                })
                            }
                            if(res.blist.length>0){
                                res.blist.forEach(function (e, i) {
                                    var html = '<a href="/page/item?type=company&id='+e.id+'"><div class="deptContentViewOneDiv" id="'+e.id+'" >\n' +
                                        '                <div class="deptContentViewOneIconDiv-1">◆</div>\n' +
                                        '                <div class="deptContentViewOneTextDiv-1">'+e.name+'</div>\n' +
                                        '            </div></a>'
                                    $('.deptContentViewDiv').append(html)
                                })
                            }
                            if(res.clist.length>0){
                                res.clist.forEach(function (e, i) {
                                    var html = '<a href="/page/item?type=personal&id='+e.id+'"><div class="deptContentViewOneDiv" id="'+e.id+'" >\n' +
                                        '                <div class="deptContentViewOneIconDiv-1">◆</div>\n' +
                                        '                <div class="deptContentViewOneTextDiv-1">'+e.name+'</div>\n' +
                                        '            </div></a>'
                                    $('.deptContentViewDiv').append(html)
                                })
                            }
                            if(res.textlist.length>0){
                                res.textlist.forEach(function (e, i) {
                                    var html = '<a href="/page/item?type=text&id='+e.id+'"><div class="deptContentViewOneDiv" id="'+e.id+'" >\n' +
                                        '                <div class="deptContentViewOneIconDiv-1">◆</div>\n' +
                                        '                <div class="deptContentViewOneTextDiv-1">'+e.name+'</div>\n' +
                                        '            </div></a>'
                                    $('.deptContentViewDiv').append(html)
                                })
                            }
                            if(res.filelist.length>0){
                                res.filelist.forEach(function (e, i) {
                                    var html = '<div class="deptContentViewOneDiv" id="'+e.id+'" onclick="viewFile('+e.id+')">\n' +
                                        '                <div class="deptContentViewOneIconDiv-1">◆</div>\n' +
                                        '                <div class="deptContentViewOneTextDiv-1">'+e.realName+'</div>\n' +
                                        '            </div>'
                                    $('.deptContentViewDiv').append(html)
                                    $('#'+e.id).click(function () {
                                        layer.open({
                                            type: 2,
                                            title: '详情',
                                            shadeClose: true,
                                            shade: 0.8,
                                            area: ['80%', '800px'],
                                            content: '/file/preFile/'+e.id //iframe的url
                                        });
                                    })
                                })
                            }
                        }else{
                            if(res.alist.length>0){
                                res.alist.forEach(function (e, i) {
                                    var html = '<a href="/page/item?type=public&id='+e.id+'"><div class="deptContentViewOneDiv" id="'+e.id+'" >\n' +
                                        '                <div class="deptContentViewOneIconDiv-2">◆</div>\n' +
                                        '                <div class="deptContentViewOneTextDiv-2">'+e.name+'</div>\n' +
                                        '            </div></a>'
                                    $('.deptContentViewDiv').append(html)
                                })
                            }
                            if(res.blist.length>0){
                                res.blist.forEach(function (e, i) {
                                    var html = '<a href="/page/item?type=company&id='+e.id+'"><div class="deptContentViewOneDiv" id="'+e.id+'" >\n' +
                                        '                <div class="deptContentViewOneIconDiv-2">◆</div>\n' +
                                        '                <div class="deptContentViewOneTextDiv-2">'+e.name+'</div>\n' +
                                        '            </div></a>'
                                    $('.deptContentViewDiv').append(html)
                                })
                            }
                            if(res.clist.length>0){
                                res.clist.forEach(function (e, i) {
                                    var html = '<a href="/page/item?type=personal&id='+e.id+'"><div class="deptContentViewOneDiv" id="'+e.id+'" >\n' +
                                        '                <div class="deptContentViewOneIconDiv-2">◆</div>\n' +
                                        '                <div class="deptContentViewOneTextDiv-2">'+e.name+'</div>\n' +
                                        '            </div></a>'
                                    $('.deptContentViewDiv').append(html)
                                })
                            }
                            if(res.textlist.length>0){
                                res.textlist.forEach(function (e, i) {
                                    var html = '<a href="/page/item?type=text&id='+e.id+'"><div class="deptContentViewOneDiv" id="'+e.id+'" >\n' +
                                        '                <div class="deptContentViewOneIconDiv-2">◆</div>\n' +
                                        '                <div class="deptContentViewOneTextDiv-2">'+e.name+'</div>\n' +
                                        '            </div></a>'
                                    $('.deptContentViewDiv').append(html)
                                })
                            }
                            if(res.filelist.length>0){
                                res.filelist.forEach(function (e, i) {
                                    var html = '<div class="deptContentViewOneDiv" id="'+e.id+'" onclick="viewFile('+e.id+')">\n' +
                                        '                <div class="deptContentViewOneIconDiv-2">◆</div>\n' +
                                        '                <div class="deptContentViewOneTextDiv-2">'+e.realName+'</div>\n' +
                                        '            </div>'
                                    $('.deptContentViewDiv').append(html)
                                    $('#'+e.id).click(function () {
                                        layer.open({
                                            type: 2,
                                            title: '详情',
                                            shadeClose: true,
                                            shade: 0.8,
                                            area: ['80%', '1200px'],
                                            content: '/file/preFile/'+e.id //iframe的url
                                        });
                                    })

                                })
                            }
                        }



                    }
                }
            })

        }




</script>
</body>
</html>